<template>
	<div>
		
		<flexbox
			v-if="selectionList.length > 0"
			class="selection-bar">
				<div class="selected—title">已选中<span class="selected—count">{{ selectionList.length }}</span>项</div>
				<flexbox class="selection-items-box">
					<flexbox
						v-for="(item, index) in getSelectionHandleItemsInfo()"
						:key="index"
						class="selection-item"
						@click.native="selectionBarClick(item.type)">
						<img
							:src="item.icon"
							class="selection-item-icon" >
						<div class="selection-item-name">{{ item.name }}</div>
					</flexbox>
				</flexbox>
		</flexbox>
		
			
		<!-- 员工 -->
		<relate-empoyee 
			:visible.sync="transferDialogShow" 
			:type="type"
			:radio="true"
			title="请选择员工"
			@save="employeesSave" />
			
	</div>
</template>

<script type="text/javascript">
	import { mapGetters } from 'vuex'
	
	
	// 员工组件
	import RelateEmpoyee from '@/views/setting/auth/components/relateEmpoyee'
	
	// API
	import { filterIndexfields,crmHehuorenDel } from '@/api/setting/setting'
	import {
		crmLawcaseDelete,
		crmLawcaseLawcasecomplainDel,
		crmLawcaseJudgmentDel,
		crmLawcaseLogDel,
		crmLawcasePreservationDel,
		crmLawcaseCourtDel
	} from '@/api/lawcase/lawcase'
	
	export default {
		name: 'CRMTableHead', 
		components: {
			RelateEmpoyee
		},
		props: {
			crmType: {
				type: String,
				default: ''
			},
			actiontype: {
				type: [String,Number],
				default: ''
			},
			// 辅助 使用 公海没有场景
			isSeas: {
				type: Boolean,
				default: false
			},
			isSea: {
				type: Boolean,
				default: false
			},
			
			showHegihtSearch: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				// 勾选操作数据
				selectionList: [],
				transferDialogShow: false,
				
				type:""
			}
		},
		computed: {
			...mapGetters(['allAuth'])
		},
		mounted() {},
		methods: {
			
			
			/** 勾选后的表头操作 */
			headSelectionChange(array) {
			  this.selectionList = array
			},
			
			
			/** 获取展示items */
			getSelectionHandleItemsInfo() {
				const handleInfos = {
					export: {
						name: '导出选中',
						type: 'export',
						icon: require('@/assets/img/selection_export.png')
					},
					delete: {
						name: '删除',
						type: 'delete',
						icon: require('@/assets/img/selection_delete.png')
					},
					close: {
						name: '结案',
						type: 'close',
						icon: require('@/assets/img/selection_disable.png')
					}
				}
				if (this.crmType == 'lawcase') {
					return this.forSelectionHandleItems(handleInfos, [
						'export',
						'delete'
					])
				}else{
					return this.forSelectionHandleItems(handleInfos, [
						'export',
						'delete'
					])
				}
			},
			
			forSelectionHandleItems(handleInfos, array) {
				var tempsHandles = []
				for (let index = 0; index < array.length; index++) {
					const type = array[index]
					if (this.whetherTypeShowByPermision(type)) {
						tempsHandles.push(handleInfos[type])
					}
				}
				
				return tempsHandles
			},
			
			// 判断是否展示
			whetherTypeShowByPermision(type) {
				if (type == 'export') {
					return this.allAuth[this.crmType].excelexport
				} else if (type == 'delete') {
					if(this.actiontype == 8) {
						return this.allAuth[this.crmType].del_log
					}else if (this.actiontype == 9) {
						return this.allAuth[this.crmType].del_court				
					}else if (this.actiontype == 10) {
						return this.allAuth[this.crmType].del_judgment				
					}else if (this.actiontype == 11) {
						return this.allAuth[this.crmType].del_preservation				
					}else if (this.actiontype == 12) {
						return this.allAuth[this.crmType].del_lawcasecomplain				
					}
					return this.allAuth[this.crmType].delete
				}
			
				return true
			},
			
			/** 操作 */
			selectionBarClick(type) {
				if (type == 'export') {
					// const params = { scene_id: this.scene_id }
					const params = {}
				
					params['id'] = this.selectionList.map(item => {
						return item['id']
					})
					params.__export = true
					this.$emit('exportData', params)
				}  else if (
					type == 'delete'
				) {
					var message = ''
					if (type == 'delete') {
						message = '确定要删除这些数据吗?'
					}
					this.$confirm(message, '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
				    .then(() => {
						this.confirmHandle(type)
				    })
				    .catch(() => {
						this.$message({
							type: 'info',
							message: '已取消操作'
						})
				    })
				}
			},
			
			confirmHandle(type) {
				if (type === 'delete') {
					const self = this
					var ids = this.selectionList.map(function(item, index, array) {
						return item['id']
					})
					let request
					if (this.actiontype == 8) {
						request = crmLawcaseLogDel
					}else if (this.actiontype == 9) {
						request = crmLawcaseCourtDel
					}else if (this.actiontype == 10) {
						request = crmLawcaseJudgmentDel
					} else if (this.actiontype == 11) {
						request = crmLawcasePreservationDel
					} else if (this.actiontype == 12) {
						request = crmLawcaseLawcasecomplainDel
					} else{
						request = crmLawcaseDelete
					}
					 
					request({
					  id: ids
					})
					.then(res => {
						this.$message({
							type: 'success',
							message: res.data
						})
						this.$emit('handle', { type: type })
					  })
					  .catch(() => {})
				}
			},
			
			/**
			 * 转移客户
			 */
			employeesSave(val) {
				if(!val.type) return
				let request
				let ids
				if (val.type == 'alloc') {
					request = crmCustomerAlloc
					ids = this.selectionList.map(function(data) {
						return data.customer_id
					})
				} else if(val.type == 'transfer'){
					request = crmCustomerTransfer
					ids = this.selectionList.map(function(data) {
						return data.customer_id
					})
				} else if(val.type == 'l_transfer'){
					request = crmLeadTransfer
					ids = this.selectionList.map(function(data) {
						return data.id
					})
				}
				
				request({
						customer_id: ids,
						owner_user_id: val.users[0].id
					})
					.then(res => {
						this.$message.success(res.data)
						this.transferDialogShow = false
						this.$emit('handle', { type: val.type })
					})
					.catch(() => {})
				
			},
		}
	}
</script>
<style lang="scss" scoped>
	@import "@/styles/xr-theme.scss";

	.th-container {
		font-size: 13px;
		height: 50px;
		padding: 0 20px;
	}

	/** 场景和筛选 */
	.condition_title {
		cursor: pointer;
	}

	.condition_title:hover {
		color: $xr-color-primary;
	}

	.m-arrow {
		margin: 0 8px;
	}

	.c-filtrate {
		margin: 0 10px 0 30px;
		width: 12px;
	}

	/** 勾选操作 */
	.selection-bar {
		font-size: 12px;
		height: 50px;
		padding: 0 20px;
		color: #777;

		.selected—title {
			flex-shrink: 0;
			padding-right: 20px;
			border-right: 1px solid $--table-border-color;

			.selected—count {
				color: $xr-color-primary;
			}
		}
	}

	.selection-items-box {
		overflow-x: auto;
		overflow-y: hidden;

		.selection-item {
			width: auto;
			padding: 15px;
			flex-shrink: 0;

			.selection-item-icon {
				display: block;
				margin-right: 5px;
				width: 15px;
				height: 15px;
			}

			.selection-item-name {
				cursor: pointer;
				color: #777;
			}

			.selection-item-name:hover {
				color: $xr-color-primary;
			}
		}
	}
</style>
